<template>
  <!-- 背景 -->
  <div class="bg">
    <div class="top">
      <div class="title">原料行情</div>
    </div>
    <div class="purchase-headers-style-forever">
      <div class="purchase-headers-style-forever-title">{{ dateTime }}<br>{{ dateValue.split('-')[0] + "年" + dateValue.split('-')[1] + "月" + dateValue.split('-')[2] + "日" }}</div>
      <div class="purchase-headers-style-forever-swiper" v-if="dataList.length > 0">
        <el-carousel style="width: 100%;" height="20px" indicator-position="none">
          <el-carousel-item v-for="(item, index) in dataList" :key="index">
            <div class="purchase-headers-style-forever-swiper-data" v-for="(itemV, indexChild) in item.child" :key="indexChild">
              <div class="purchase-headers-style-forever-swiper-data-title">{{ itemV.name }}</div>
              <div class="purchase-headers-style-forever-swiper-data-value" :style="itemV.goUp > 0 ? 'color: #D13123;' : (itemV.goUp < 0 ? 'color: #48AF92;' : '')">{{ itemV.price }}</div>
              <div class="purchase-headers-style-forever-swiper-data-value" :style="itemV.goUp > 0 ? 'color: #D13123;' : (itemV.goUp < 0 ? 'color: #48AF92;' : '')">{{ itemV.goUp }}</div>
              <div class="purchase-headers-style-forever-swiper-data-value" :style="itemV.goUp > 0 ? 'color: #D13123;' : (itemV.goUp < 0 ? 'color: #48AF92;' : '')">{{ itemV.changePercentage }}</div>
              <div class="purchase-headers-style-forever-swiper-data-line" v-if="indexChild == 0"></div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
    <div class="news_classify">
      <div style="display: flex; width: 50%;">
        <span style="font-family: Microsoft YaHei; font-weight: bold;font-size: 18px;color: #333333; display: flex; align-self: center;margin-right: 20px;display: flex; flex-shrink: 0;">产品名称</span>
        <el-select v-model="productName" :placeholder="userInfo.hasVip == 1 ? '请选择' : '请开通会员使用'" :disabled="userInfo.hasVip == 0" style="width: 280px;height: 40px;">
            <el-option
              v-for="item in typeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              >
            </el-option>
        </el-select>
        <el-button style="background: #F42551; color: #FFF; height: 40px; padding: 0 32px; border-radius: 5px;margin-left: 20px;" @click.stop="searchChange">查询</el-button>
      </div>
      <div style="display: flex;width: 50%;">
        <span style="font-family: Microsoft YaHei; font-weight: bold;font-size: 18px;color: #333333; display: flex; align-self: center; margin-right: 20px; flex-shrink: 0;">日期</span>
        <el-date-picker
          style="width: 280px;"
          v-model="priceTime"
          type="date"
          placeholder="选择日期">
        </el-date-picker>
        <el-button style="background: #F42551; color: #FFF; height: 40px; padding: 0 32px; border-radius: 5px; margin-left: 20px;" @click.stop="searchChange">查询</el-button>
      </div>
    </div>
    <div class="account-vip-list" v-if="userInfo.hasVip == 0">
      <div class="account-vip-list-name">{{dateValue}}</div>
      <div class="account-vip-list-flex-name">开通会员可查看更多数据 <span style="color: #F42551;margin-left: 10px;cursor: pointer;" @click.stop="open">立即开通>></span></div>
    </div>
      <!-- :header-cell-style="{fontSize: '15px', backgroundColor: '#EFEFEF',color:'#333'}" -->
    <el-table
        :data="attentionData"
        @cell-mouse-enter="cellMouseEnter"
        @cell-mouse-leave="cellMouseLeave"
        height="450px"
        ref="myTable"
        v-el-table-infinite-scroll="loadMore"
        :infinite-scroll-immediate="false"
        style="width: 100%; margin-top: 30px; margin-bottom: 40px;overflow: auto;">
        <el-table-column
          fixed
          label="排序"
          width="100">
          <template slot-scope="scope">
            <span v-if="scope.row" style="font-weight: bold;font-size: 16px;color: #0A0A0A;">{{ scope.row.no }}</span>
          </template>
        </el-table-column>
        <el-table-column
          fixed
          prop="productName"
          label="产品名称"
          style="text-align: left;display: flex;"
          width="200">
          <template slot-scope="scope">
            <div v-if="scope.row" style="font-family: Microsoft YaHei;display: flex;"><span style="font-size: 17px;color: #0A0A0A;font-weight: bold;text-align: left;">{{  scope.row.productName  }}</span></div>
            <div v-if="scope.row" style="font-family: Microsoft YaHei;display: flex;"><span style="color: #989898;font-size: 14px;">{{ scope.row.manufacturersName + "-" + scope.row.markName }}</span></div>
          </template>
        </el-table-column>
        <el-table-column
          label="价格(不含税)"
          :render-header="renderHeader"
          width="180">
          <template slot-scope="scope">
            <span v-if="scope.row" class="text-value" :style="scope.row.marketPrice.go_up > 0 ? 'color: #D13123;' : (scope.row.marketPrice.go_up < 0 ? 'color: #48AF92;' : 'color: #989898;')">{{  scope.row.marketPrice.price  }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="涨跌">
          <template slot-scope="scope">
            <div v-if="scope.row" class="text-value" :style="scope.row.marketPrice.go_up > 0 ? 'color: #D13123;' : (scope.row.marketPrice.go_up < 0 ? 'color: #48AF92;' : 'color: #989898;')">{{  scope.row.marketPrice.go_up  }}</div>
          </template>
        </el-table-column>
        <el-table-column
          label="涨跌幅">
          <template slot-scope="scope">
            <div v-if="scope.row" class="btn-value" :style="scope.row.marketPrice.go_up > 0 ? 'background: #D13123;' : (scope.row.marketPrice.go_up < 0 ?  'background: #48AF92;' : 'background: #989898;')">{{  scope.row.marketPrice.changePercentage  }}</div>
          </template>
        </el-table-column>
        <el-table-column
          label="走势图">
          <template slot-scope="scope">
            <div class="btn-icon" @click.stop="checkClick(scope.row.id)">
              <img src="@/assets/update/xiantu_iocn@2x.png" />
            </div>
          </template>
        </el-table-column>
      </el-table>
    <!-- 收费二维码 -->
    <el-dialog
      title="会员收费二维码"
      :visible.sync="chargeDialog"
      width="5.71rem"
      center
      class="chargeDialog button"
    >
      <img :src="this.codeUrl | urlLoad" id="qrcode" alt="" />
    </el-dialog>
  </div>
</template>

<script>
export default {
  created() {
    this.dateValue = new Date().getFullYear() 
                    + "-" + ((new Date().getMonth() + 1) > 9 ? (new Date().getMonth() + 1) : ("0" + (new Date().getMonth() + 1)))
                    + "-" + ((new Date().getDate()) > 9 ? (new Date().getDate()) : ("0" + (new Date().getDate())))
    this.dateTime = this.zhouList[new Date().getDay()]
    this.crudeList(this.dateValue)
    this.getUserInfo()
  },
  data() {
    return {
      attentionData: [],
      typeOptions: [],
      userInfo: {},
      zhouList: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
      pageNo: 1,
      pageSize: 10,
      productName: "",
      total: 0,
      cellIndex: null,
      dateTime: "",
      dateValue: "",
      dateValue_item: "",
      chargeDialog: false,
      codeUrl: "",
      priceTime: "",
      dataList: []
    };
  },
  mounted() {
  },
  methods: {
    // 原油列表
    async crudeList(dateValue = "") {
      let res = await this.$apiFun.crudeList({
        createTIme: dateValue
      })
      if (res.result.length > 0) {
        let data = []
        for (let i = 1; i <= res.result.length; i++) {
          if (i % 2 == 0) {
            data.push(res.result[i - 1])
            let form = {
              "child" : data
            }
            this.dataList.push(form)
            data = []
          } else {
            data.push(res.result[i - 1])
            if (res.result.length == i) {
              let form = {
                "child" : data
              }
              this.dataList.push(form)
              data = []
            }
          }
        }
        console.log(this.dataList)
      } else {
        this.crudeList()
      }
    },
    // 列表
    async listFollow() {
      let res = await this.$apiFun.rawMaterialPrices({
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        productName: this.productName,
        priceTime: this.priceTime
      });
      if (res.result.rows.length > 0) {
        if (this.attentionData.length == 0) {
          this.attentionData =  res.result.rows.map((row, index) => {
            row["index"] = index
            row["no"] = index + 1
            return { ...row };
          })
          this.pageNo += 1
        } else {
          this.attentionData = this.attentionData.concat(res.result.rows.map((row, index) => {
            row["index"] = index + this.attentionData.length
            row["no"] = (index + this.attentionData.length) + 1
            return { ...row };
          }));
          this.pageNo += 1
        }
        this.total = Number(res.result.total);
      } else {
        return
      }
      console.log("数据集合",this.attentionData);
    },
    cellMouseEnter(e) {
      this.cellIndex = e.index
    },
    cellMouseLeave() {
      this.cellIndex = null
    },
    async onclickPin() {
      let res = await this.$apiFun.getProductName()
      this.typeOptions = res.result.map((row) => {
        let data = {
          label: row,
          value: row
        }
        return { ...data };
      });
    },
    searchChange() {
      this.pageNo = 1
      this.attentionData = []
      this.listFollow()
    },
    async getUserInfo() {
      let res = await this.$apiFun.getUserInfo()
      this.userInfo = res.result
      if (this.userInfo.hasVip == 1) {
        this.onclickPin()
      }
    },
    // 开通会员
    open() {
      this.openDel = this.askDialog = false;
      this.chargeDialog = true;
      this.openMember();
    },
    // 获取支付二维码
    async openMember() {
      let params = {
        orderIdOrSN: "1",
        payType: "WXNATIVE",
        tradeType: "NATIVE",
      };

      if (this.userInfo.hasSupplierInformation == 1) {
        let res = await this.$apiFun.openMember(params);
        this.codeUrl = res.result;
        // this.payReturn()
      } else {
        this.$message({
          type: "error",
          message: "当前您还没入驻供应商，请先入驻供应商",
          duration: 1500,
        });
        this.chargeDialog = false;
        setTimeout(() => {
          this.$router.push("supplier_enter");
        }, 2000);
      }
    },
    loadMore() {
      this.listFollow()
    },
    checkClick(id) {
      console.log("跳转数据获取id",id);
      this.$router.push({
        name: "purchase_hangqing_detail",
        query: {
          id: id
        },
      });
    },
    renderHeader(h) {
      return h('span', [
        h('span', '价格'),
        h('i', ' 不含税')
      ])
    }
  },
  watch: {
    "$route.name": {
      handler(newName) {
        if (newName === "purchase_hangqing") {
          this.pageNo = 1;
          this.pageSize = 10;
          this.listFollow();
        }
      },
    },
  },
};
</script>

<style lang="less" scoped>
.bg {
  background: #ffffff;
  box-shadow: 0px 3px 20px 0px rgba(230, 230, 230, 0.8);
  border-radius: 10px;
  padding: 0.3rem 0.5rem;
  text-align: left;
  font-family: Microsoft YaHei;
  // 顶部标题
  .top {
    .title {
      font-size: 0.24rem;
      font-weight: bold;
      color: #333333;
      line-height: 0.3rem;
    }
  }
}
.news_classify {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 30px;
  span {
    font-size: 18px;
    font-weight: 400;
    color: #333333;
    
  }
  /deep/.el-select {
    margin: 0rem 0.4rem 0rem 0.2rem;
  }
}
// 分页样式
/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #f42551;
}
.messagess-hover:hover {
  color: #f42551;
}
.account-vip-list {
    width: calc(100% - 80px);
    height: auto;
    padding: 14px 40px;
    display: flex;
    background: #EFEFEF;
    margin-top: 30px;
    justify-content: space-between;
  }
  .account-vip-list-name {
    width: auto;
    height: auto;
    font-family: Microsoft YaHei;
    font-size: 15px;
    color: #333333;
    display: flex;
    align-self: center;
  }
  .account-vip-list-flex {
    width: auto;
    height: auto;
    display: flex;
    align-self: center;
  }
  .account-vip-list-flex-name {
    width: auto;
    height: auto;
    font-family: Microsoft YaHei;
    font-weight: 300;
    font-size: 15px;
    color: #333333;
    display: flex;
    align-self: center;
  }
  /deep/.el-dialog {
  margin-top: 2rem !important;
  border-radius: 10px;
  .el-dialog__header {
    border-radius: 10px 10px 0px 0px;
    background: #efefef;
    display: flex;
    justify-content: space-between;
    .el-dialog__title {
      margin-left: 0.3rem;
      font-size: 0.2rem;
      font-weight: bold;
      color: #333333;
    }
  }
  .el-dialog__footer {
      height: 0.7rem;
      padding: 0;
      .dialog-footer {
        width: 100%;
        height: 0.4rem !important;
        display: flex;
        justify-content: center;

        .el-button--default {
          width: 2rem;
          height: 0.4rem;
          line-height: 0.1rem;
          background: #ffffff;
          border: 1px solid #333333;
          border-radius: 5px;
          display: block;
        }
        .el-button--primary {
          width: 2rem;
          height: 0.4rem;
          line-height: 0.1rem;
          background: #f42551;
          border-radius: 5px;
          border: none;
          margin-left: 0.3rem;
          display: block;
        }
      }
    }
  }
  .chargeDialog {
    /deep/ .el-dialog__body {
      display: flex;
      flex-direction: column;
      align-items: center;
      .qrcode,
      #qrcode {
        width: 1.8rem;
        height: 1.8rem;
      }
      span {
        font-size: 0.2rem;
        font-weight: 400;
        color: #333333;
        line-height: 0.3rem;
      }
      .text {
        display: flex;
        flex-direction: column;
        align-items: center;
      }
    }
  }
  .button /deep/ .el-button.el-button--default {
    width: 2rem;
    border: 1px solid #333333;
    border-radius: 5px;
    font-size: 0.16rem;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #333333;
  }
  
  // 最新css样式，谁动谁死
  .purchase-headers-style-forever {
    width: auto;
    height: auto;
    padding: 18px;
    margin-top: 30px;
    display: flex;
    position: relative;
    background: url("../../assets/update/hangqingshuju_bg@2x.png");
    background-size: cover;
  }
  .purchase-headers-style-forever-title {
    width: 150px;
    height: auto;
    font-family: Microsoft YaHei;
    font-weight: bold;
    font-size: 18px;
    color: #FFFFFF;
    display: flex;
    align-self: center;
  }
  .purchase-headers-style-forever-swiper {
    width: calc(100% - 190px);
    height: auto;
    padding: 0px 24px;
    justify-content: space-between;
    background-color: white;
    border-radius: 6px;
    display: flex;
  }
  .purchase-headers-style-forever-swiper-data {
    width: calc((100% / 2) - 24px);
    height: auto;
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 100;
  }
  .purchase-headers-style-forever-swiper-data-line {
    width: 1px;
    height: 24px;
    background: #EBEBEB;
    display: flex;
    align-self: center;
    margin: 0 24px;
  }
  .purchase-headers-style-forever-swiper-data-title {
    width: auto;
    height: auto;
    font-family: 'DreamHanSerifCN';
    font-weight: normal;
    font-size: 20px;
    color: #989898;
    display: flex;
    align-self: center;
  }
  @font-face {
		font-family: 'DreamHanSerifCN';
		src: url('../../assets/styles/DROIDSERIF.TTF');
		font-weight: normal;
		font-style: normal;
	}
  @font-face {
		font-family: 'Impact';
		src: url('../../assets/styles/IMPACT.TTF');
		font-weight: normal;
		font-style: normal;
	}
  .purchase-headers-style-forever-swiper-data-value {
    width: auto;
    height: auto;
    font-family: 'Impact';
    font-weight: 400;
    font-size: 20px;
    color: #989898;
    display: flex;
    align-self: center;
    display: flex;
    align-self: center;
  }
  .el-carousel__item {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    display: flex;
    align-self: center;
    align-items: center;
  }
  .el-carousel {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  ::v-deep .el-input__icon {
    width: 30px;
  }
  ::v-deep .el-select .el-input .el-select__caret::before {
    /*content: "\e78f"*/
    content: "";
    background: url(../../assets/update/icon_wdxx_down@2x.png) center center no-repeat;
    position: absolute;
    background-size: 24px 24px;
    width: 24px;
    height: 24px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  ::v-deep .el-table th.el-table__cell>.cell {
    font-family: PingFang SC;
    font-weight: bold;
    font-size: 20px;
    color: #070707;
  }
  ::v-deep .el-input__prefix {
    width: 25px;//这里要给宽度的，要不然会挡住事件，触发不了选择日期
    position: absolute;
    left: 90%!important;
  }
  ::v-deep .el-icon-date {
    background: url(../../assets/update/time_icon@2x.png) center center no-repeat;
    background-size: 20px;
  }
  ::v-deep .el-input__prefix .el-input__icon {
    width: 100%;
  }
  ::v-deep .el-icon-date:before {
    content: "";
  }
  ::v-deep .el-input--prefix .el-input__inner {
    padding-left: 15px;
  }
  /* 修改滚动条整体样式 */
  ::-webkit-scrollbar {
    width: 4px;
    background-color: #f5f5f5;
  }
  
  /* 修改滚动条滑块样式 */
  ::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 5px;
  }
  
  /* 修改滚动条悬停时滑块样式 */
  ::-webkit-scrollbar-thumb:hover {
    background-color: #555;
  }
  
  /* 修改滚动条轨道样式 */
  ::-webkit-scrollbar-track {
    background-color: #f5f5f5;
  }
  .text-value {
    width: auto;
    height: auto;
    font-family: 'Impact';
    font-weight: 400;
    font-size: 16px;
    margin: auto;
  }
  .btn-value {
    width: 80px;
    height: 36px;
    border-radius: 3px;
    font-family: 'Impact';
    font-weight: 400;
    font-size: 16px;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
  }
  .btn-icon {
    width: 32px;
    height: 28px;
    margin: auto;
    cursor: pointer;
  }
  .btn-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  ::v-deep .el-table .cell {
    text-align: center;
  }
  ::v-deep .news_classify .el-select {
    margin: 0;
  }
  ::v-deep .el-table th.el-table__cell .cell span i {
    font-style: normal;
    font-family: PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #C0BCBC;
    margin-left: 9px;
  }
  ::v-deep .el-table_1_column_2 .cell {
    text-align: left;
  }
</style>